<template>
    <div class="relative flex h-60 w-full flex-col items-center justify-center">
        <FallingStarsBg class="bg-white dark:bg-black" :color="isDark ? '#FFF' : '#555'" />
        <div class="z-[1] flex items-center ">
            <span class="text-3xl font-bold text-black dark:text-white">
                <slot/>
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useColorMode } from "@vueuse/core";
import FallingStarsBg from "./fallingStarsBackground.vue";

const isDark = computed(() => useColorMode().value == "");

</script>